<script setup>
import DetailFilter from "@/views/app/IncomeDetail/DetailFilterCreator.vue";
import {reactive, ref} from 'vue';
import {IncDetailRec} from "@/script/model/tables/IncDetailRec";
import axios from "axios";
import {ElMessage} from "element-plus";
import IncDetailDialogCont from "@/views/app/IncomeDetail/IncDetailDialogCont.vue";

const incomeDetails = ref([]);
const incDetailTableColInfo = IncDetailRec.tableColumn;
const updateDetailDialogVisible = ref(false);
const current = reactive({
  dataDate: '', roomNo: '', customer: '', realIncome: '', source: '', description: ''
});

/**
 * 通过响应return事件读取查询结果
 * @param data 查询结果
 */
const fetchResults = (data) => {
  incomeDetails.value = data;
}

const selectedDetails = ref([]);
/**
 * 用于响应select-change事件，变更选择条目
 * @param selection
 */
const handleSelectionChange = (selection) => selectedDetails.value = selection;

/**
 * 根据用户点选的内容删除记录
 */
const deleteSelectedDetails = () => {
  const ids = [];
  selectedDetails.value.forEach((rec) => ids.push(rec.id));
  if (ids.length !== 0) {
    axios.post('http://localhost:30601/fms/income-analyse/delete-income-detail', ids)
        .then((response) => {
              if (response.data.content != null) {
                ElMessage({message: '成功删除' + response.data.content + '条记录', type: "success"});
              } else {
                ElMessage({
                  message: '删除失败！错误编码:' + response.data.code + "：" + response.data.message,
                  type: "error"
                });
              }
            }
        );
  }
  incomeDetails.value = incomeDetails.value.filter(rec => selectedDetails.value.indexOf(rec) === -1);
}

const test = ref("测试")
const updateDetail = (rowData) => {
  current.value = rowData;
  updateDetailDialogVisible.value = true;
}
const submitNewDetail = (toBeUpdate) => {
  if (toBeUpdate !== null) {
    console.log(toBeUpdate);
    axios.post('http://localhost:30601/fms/income-analyse/update-income-detail', toBeUpdate)
        .then((response) => {
          if (response.data.content !== null) {
            ElMessage({message: '成功更新' + response.data.content + '条记录', type: 'success'});
          } else {
            ElMessage({
              message: '删除失败！错误编码:' + response.data.code + "：" + response.data.message,
              type: "error"
            });
          }
        });
  }
  updateDetailDialogVisible.value = false;
}
</script>

<template>
  <detail-filter @return="fetchResults"/>
  <el-empty v-if="incomeDetails.length === 0"/>
  <div v-else>
    <div class="income-details">
      <el-table size="default" table-layout="auto" :data="incomeDetails" highlight-current-row
                @row-dblclick="updateDetail" @selection-change="handleSelectionChange">
        <el-table-column type="selection"/>
        <el-table-column v-for="info in incDetailTableColInfo" :prop="info.col" :label="info.label"/>
      </el-table>
    </div>
    <el-button type="danger" size="default" @click="deleteSelectedDetails">删除所选行</el-button>
  </div>
  <el-dialog v-model="updateDetailDialogVisible" title="变更明细" width="500">
    <inc-detail-dialog-cont :detail="current.value" @cancel="updateDetailDialogVisible = false"
                            @submit-detail="submitNewDetail"/>
  </el-dialog>
</template>

<style scoped lang="scss">
.income-details {
  margin-bottom: 10px;
}
</style>